<template>
  <div class="weather">

    <div class="jieqi">
      <img v-if="solar.useImage" style="height:177px;width:177px;" :src="solar.icon" />
      <svg-icon v-else :icon-class="solar.icon" width="176px" height="176px"></svg-icon>
    </div>

    <!-- 现在 -->
    <div class="now hover-dark">
      <div class="weather-title">
        <dateLine></dateLine>
        <span
          style="font-size: 12px;border: 1px solid var(--el-border-color);padding: 1px 5px;margin-left: 10px;border-radius: 4px;">当前天气为模拟信息</span>
      </div>

      <div class="weather-body">
        <svg aria-hidden="true" style="width: 70px;height: 70px;margin-left: 10px;">
          <use :xlink:href="weather.now.iconValue"></use>
        </svg>
        <span class="now-temp">{{ weather.now.temp }}</span>
        <div class="now-temp-extra">
          <span style="font-size: 25px;">°C</span>
          <span style="">{{ weather.now.text }}</span>
        </div>
      </div>

      <div class="weather-footer">
        <span>未来两小时: {{ weather.hourly[0].text }}</span>
      </div>
    </div>

    <!-- 今天 -->
    <div class="today hover-dark">
      <div class="weather-title">今天</div>
      <div class="weather-body">
        <div>
          <svg aria-hidden="true">
            <use :xlink:href="weather.daily[0].iconValueDay"></use>
          </svg>
          <span>{{ weather.daily[0].tempMin }}° ~ {{ weather.daily[0].tempMax }}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{ weather.daily[0].textDay }}</span>
      </div>
    </div>

    <!-- 明天 -->
    <div class="tomorrow hover-dark">
      <div class="weather-title">明天</div>
      <div class="weather-body">
        <div>
          <svg aria-hidden="true">
            <use :xlink:href="weather.daily[1].iconValueDay"></use>
          </svg>
          <span>{{ weather.daily[1].tempMin }}° ~ {{ weather.daily[1].tempMax }}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{ weather.daily[1].textDay }}</span>
      </div>
    </div>

    <!-- 后天 -->
    <div class="dayaftert hover-dark">
      <div class="weather-title">后天</div>
      <div class="weather-body">
        <div>
          <svg aria-hidden="true">
            <use :xlink:href="weather.daily[2].iconValueDay"></use>
          </svg>
          <span>{{ weather.daily[2].tempMin }}° ~ {{ weather.daily[2].tempMax }}°</span>
        </div>
      </div>
      <div class="weather-footer">
        <span class="weather-footer-small">{{ weather.daily[2].textDay }}</span>
      </div>
    </div>

    <!-- 遮罩 -->
    <div class="weather-mask" v-show="maskVisible" @click="findWeather">
      <div :class="weatherResult === 'LOADING' ? 'big-text masking' : 'big-text'">
        <div :class="weatherResult === 'LOADING' ? 'big-text masking' : 'big-text'">
          {{ weatherResult === 'LOADING' ? '正在查询天气' : '获取天气失败' }}
        </div>
      </div>
      <div class="small-text">点击刷新</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import dateLine from "./DateLine.vue";
import { getAll } from "@/api/weather";
import { getSolar } from "@/assets/utils/util";

// 
const maskVisible = ref(false);
const weatherResult = ref('LOADING');
const solar = ref({
  icon: '',
  useImage: false
})
const weather = ref({
  now: {
    iconValue: '#wt-qing',
    temp: '30',
    text: '晴'
  },
  hourly: [{
    text: '0'
  }],
  daily: [
    { iconValueDay: '#wt-qing', tempMin: '20', tempMax: '25', textDay: '晴' },
    { iconValueDay: '#wt-qing', tempMin: '22', tempMax: '28', textDay: '晴' },
    { iconValueDay: '#wt-yin', tempMin: '18', tempMax: '25', textDay: '晴' }
  ]
});

const findWeather = () => {
  weatherResult.value = 'LOADING';
  setTimeout(() => {
    // getAll().then(resp => {
    //   weather.value = resp.data;
    // })
  }, 1000);
}

const refreshWeatherTask = () => {
  setInterval(findWeather, 1000 * 60 * 20);
}

const solarIsImageHandler = () => {
  let currentSolar = getSolar();
  if (currentSolar == '清明' || currentSolar == '立夏' || currentSolar == '处暑' ||
    currentSolar == '白露' || currentSolar == '立冬' || currentSolar == '小暑') { // !!!!!!!!!!!!!!!!!
    solar.value.icon = new URL(`../assets/imgs/solar/${currentSolar}.png`, import.meta.url).href;
    solar.value.useImage = true;
  } else {
    solar.value.icon = currentSolar;
  }
}

onMounted(() => {
  findWeather();
  refreshWeatherTask();
  solarIsImageHandler();
})
</script>

<style scoped lang="scss">
.weather {
  @include flex(row);
  @include font(15px, 500, 'jellee');
  // width: 900px;
  width: 100%;
  min-height: 180px;
  max-height: 180px;
  position: relative;
  border-radius: 10px;
  color: var(--xz-text-weather);
  transition: box-shadow 0.5s;
  z-index: 99;

  .weather-mask {
    @include flex(column, center, center);
    @include box(100%, 100%);
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    background-color: var(--el-color-primary-light-2);

    .big-text {
      cursor: pointer;
      @include font(25px, 800);
    }

    .small-text {
      cursor: pointer;
      @include font(14px, 500);
    }

    .masking {
      width: 100%;
      text-align: center;
      cursor: pointer;
      flex-shrink: 0;
    }

  }

  .weather-title {
    @include flex(row, center, center);
    @include box(100%, 15%);
  }

  .weather-body {
    @include flex(row, center, center);
    @include box(100%, 70%);
  }

  .weather-footer {
    @include flex(row, center, center);
    @include box(100%, 15%);

    &-small {
      @include font(11px, 500);
      margin-top: 10px;
    }
  }

  .jieqi {
    min-width: 180px;
    min-height: 180px;
    border-radius: 50%;
    transition: box-shadow 0.3s;
    -moz-box-sizing: border-box;
    box-sizing: border-box !important;
    border: 2px solid var(--el-color-primary-light-3);
    box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);
    overflow: hidden;


    [class="dark"] & {
      box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, 1);
      filter: brightness(70%);
    }

    &:hover {
      box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .5);

      [class="dark"] & {
        box-shadow: 10px 10px 10px 1px rgb(67, 67, 67);
      }
    }
  }

  .now {
    width: 40%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: var(--el-color-primary);
    transition: box-shadow 0.3s, width 0.2s, height 0.5s;
    margin-left: 20px;

    &-temp {
      @include flex(row, center, center);
      @include font(65px, 900);
      height: 100%;
      margin-left: 20px;
    }

    &-temp-extra {
      @include flex(column, center);
      @include font(16px, 700);
      height: 100%;
      min-width: 70px;
      margin-left: 10px;
      text-align: left;
    }

    &:hover {
      z-index: 15;
    }
  }

  .today,
  .tomorrow,
  .dayaftert {
    width: 20%;
    transition: box-shadow 0.3s, width 0.2s, height 0.2s;

    &:hover {
      z-index: 15;
      width: 25%;
    }

    .weather-body {
      div {
        @include flex(column, center, center);

        svg {
          @include box(35px, 35px);
        }

        span {
          @include font(15px, 700);
          margin-top: 10px;
        }
      }
    }
  }

  .today {
    background-color: var(--el-color-primary-light-3);
  }

  .tomorrow {
    background-color: var(--el-color-primary-light-5);
  }

  .dayaftert {
    background-color: var(--el-color-primary-light-6);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}

.hover-dark {
  &:hover {
    box-shadow: 0 2px 10px 3px rgba(0, 0, 0, .5);
  }
}
</style>
